Improve typescript imports

[christophechevalier]

Hi @tomastrajan !

Doesn't work for me ... any solution ? Thanks

angular-ngrx-material-starter/src/app/app.module.ts

Lines 5 to 6 in 5e9106a

	import { SharedModule } from '@app/shared';
	import { CoreModule } from '@app/core';

[tomastrajan]

Are you using VS code ? I guess application will work if you run npm start and it is just a editor problem but it would be nice to resolve it for every popular editor!

[christophechevalier]

Yes, I use VS code. I have tested a multiple solutions like restart app, disable plugins ..
I can show you my configuration (tsconfig.json, angular.json ... ) if you think is the problem.

Have a good weekend.

[mm185]

I think I got a similar problem. Got the same error with Atom and VS code. It seems like he does not recognize the path mapping inside tsconfig.json

[mm185]

I fixed the problem inside the ide, with adding "src/" to paths.

But now it does not work with npm start. Giving me there the same type errors I had in the ide:

[tomastrajan]

Hi @mm185 !

Thank you for taking time to try to solve this problem. As you found out, it is in fact problem with the editors.

The original version of the paths in tsconfig.json works well with the Typescript compiler during npm start or npm build for that matter. Maybe it would make sense to open an issue in the VS code Github repository?

Cheers!

[mm185]

Hey @tomastrajan. I agree, looks like there is a bug in the typescript implementation those editors use. Do you maybe know editors with typescript support that don't cause this error? Only other resolution I can think of would be to use only absolute paths in imports.

[christophechevalier]

Hi @mm185 !
Actually, I'm using this configuration :
tsconfig.json :

{
  "compileOnSave": false,
  "compilerOptions": {
    // can't use es6.
    // see the followings issues :
    // https://github.com/angular/material2/issues/11090
    // https://github.com/angular/material2/issues/10567
    "target": "es5",
    "baseUrl": ".",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "jsx": "preserve",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "plugins": [
      {
        "name": "tslint-language-service",
        // see the notice here: https://github.com/angelozerr/tslint-language-service#tslint-language-service
        // on Windows, this might trigger issues and should be removed
        // and the issue here: https://github.com/Microsoft/TypeScript/issues/15344
        "disableNoUnusedVariableRule": false
      }
    ],
    "paths": {
      // temporary fix https://github.com/Stuk/jszip/issues/524
      "stream": ["../node_modules/readable-stream/readable.js"],
      "@env/*": ["environments/*"],
      "@mks/*": ["mocks/*"],
      "@feat/*": ["app/features/*"],
      "@shared/*": ["app/shared/*"],
      "@cock/*": ["app/features/cockpit/*"],
      "@wks/*": ["app/features/cockpit/workspaces/*"]
    }
  },
  "include": ["src/**/*"],
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

tsconfig.app.json :

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "",
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": ["node"]
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  },
  "exclude": ["test.ts", "testing/**", "**/*.spec.ts"]
}

angular.json :

{
  "$schema":
    "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "newProjectRoot": "src",
  "projects": {
    "petals-cockpit": {
      "root": "",
      "sourceRoot": "/src",
      "prefix": "app",
      "projectType": "application",
      "architect": {
        "build": { ...

Can't use relative path too in the rooting module file like :

loadChildren:
      './services-endpoint-view.module#ServicesEndpointViewModule',

current routing module :

...
const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'services',
  },
  {
    path: 'endpoints/:endpointId',
    loadChildren:
      '@wks/services-content/services-endpoint-view/services-endpoint-view.module#ServicesEndpointViewModule',
  },
];
...

I agree too, looks like there is a bug in the typescript implementation those editors use.
Yeah, may be, we can open an issue here https://github.com/Microsoft/vscode
In the meantime, I'll leave my configuration like this.

[adityash5]

I was able to solve this by changing the baseUrl in tsconfig.json. Added src in baseUrl.
Now it looks like this.

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./src",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "paths": {
            "@app/*": [
                "app/*"
            ],
            "@env/*": [
                "environments/*"
            ],
            "@testing/*": [
                "testing/*"
            ]
        },
        "lib": [
            "es2017",
            "dom"
        ]
    }
}

Found solution on this thread: angular/angular-cli#8138

[tomastrajan]

@adityash5 thank you very much for your contribution! I am just pushing the fix to the master branch.

[christophechevalier]

Hi guys ! Last month, I used this configuration :

{
  "compileOnSave": false,
  "compilerOptions": {
    // can't use es6.
    // see the followings issues :
    // https://github.com/angular/material2/issues/11090
    // https://github.com/angular/material2/issues/10567
    "target": "es5",
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "jsx": "preserve",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "plugins": [
      {
        "name": "tslint-language-service",
        // see the notice here: https://github.com/angelozerr/tslint-language-service#tslint-language-service
        // on Windows, this might trigger issues and should be removed
        // and the issue here: https://github.com/Microsoft/TypeScript/issues/15344
        "disableNoUnusedVariableRule": false
      }
    ],
    "paths": {
      // temporary fix https://github.com/Stuk/jszip/issues/524
      "stream": ["../node_modules/readable-stream/readable.js"],
      "@env/*": ["environments/*"],
      "@mocks/*": ["mocks/*"],
      "@feat/*": ["app/features/*"],
      "@shared/*": ["app/shared/*"],
      "@cock/*": ["app/features/cockpit/*"],
      "@wks/*": ["app/features/cockpit/workspaces/*"]
    }
  },
  "include": ["src/**/*"],
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

and this has worked well since this change.