Angular-cli: karma errors when using non-relative path import

[zzs1020]

OS?

Mac OSX (El Capitan)

Versions.

angular-cli: 1.0.0-beta.22-1
node: 6.9.1
os: darwin x64

Repro steps.

app created using the CLI. Code changes on tsconfig.json, add following lines:
"baseUrl": ".",
"paths": {
"services/*": ["app/shared/services/*"]
},

The log given by the failure.

While this configuration is working very well on 'ng serve', the app runs as expected. But failed on 'ng test', it seems like Karma doesn't recognize the non-relative path'. Following is Error msg:

ERROR in ./src/app/cart/cart-summary/cart-summary.component.ts Module not found: Error: Can't resolve 'services/cart' in '/Users/stevezheng/webstorm/mai/src/app/cart/cart-summary'
@ ./src/app/cart/cart-summary/cart-summary.component.ts 12:13-37
@ ./src/app/cart/cart-summary/cart-summary.component.spec.ts
@ ./src .spec.ts
@ ./src/test.ts
Chrome 54.0.2840 (Mac OS X 10.11.6) ERROR
Uncaught Error: Cannot find module "services/cart"
at webpack:///Users/stevezheng/webstorm/mai/src/app/cart/cart-summary/cart-summary.component.ts:3:0 <- src/test.ts:53357

Other details:

There's no error when I import "services/cart" in my feature.module.ts, but do throw errors when import in xxx.component.ts.
Again, there's no error for running app but runing test.

Do I need to config more to make test work or this is a bug?

I created a sample for you testing:

https://github.com/SteveZheng-BSFT/karma-error-sample
After changing to relative path, ng test has no errors.

[rolandoldengarm]

Yeah, that's because .beta-22-1 always compiles using AOT (that's a bug).
To allow relative imports in AOT, I had the same issue. I've ended up adding all the references to the package.json file, like this:
"browser": { "app/domain/core": "./src/app/domain/core", ....

[zzs1020]

@rolandoldengarm this way does fix the issue, but it's somehow inconvenient because I can't put a wildcard here. Hopefully this is not the best choice...

[rolandoldengarm]

Yeah it's not optimal, hope there is a better solution :)

[vfedoriv]

I too have something like that, #3533
Wait beta.23, maybe...

[drakenfly]

Still having the same issues with beta.24. Does somebody has any tips for getting this to work, besides writing every import to browser: { ... } inside package.json?

As @SteveZheng-BSFT already said: It is working with ng serve. Only ng test fails when resolving the modules.

[AnianZ]

Me too. ng serve and ng build work just fine but i can't test my apps.

[jakpaw]

Same for me.

[drakenfly]

Hi!

I created a temporary workaround to fix this problem.

New files

Save the code of my gist to a file named common.js. I've put it into /tools/ng-test.

Create three more files inside the same folder:

prepare.js

require('./common').updatePackageFile(true);

update.js

require('./common').updatePackageFile(false);

revert.js

require('./common').revertPackageFile();

package.json scripts

Update your package.json like this:

{
  "scripts": {
    "test-single-run": "npm run prepare-test && npm run test -- --single-run --progress=False && npm run revert-test",
    "prepare-test": "node tools/ng-test/prepare.js",
    "revert-test": "node tools/ng-test/revert.js",
    "update-test": "node tools/ng-test/update.js",
    ...
  },
  ...
}

• Run node\npm run prepare-test, to write all ts-files in src-folder to package.json. Tests can now be executed successfully again.
• Run node\npm run update-test, to update all paths in package.json's browser-property, when new files were added etc.
• Run node\npm run revert-test, to revert package.json to it's original state, as soon as testing is finished.

To simplify this process, run node\npm run test-single-run. This will prepare, run tests (but only once - watching is disabled!) and revert in correct order.

I hope, someone is successful with that too. Have fun!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}