Angular-cli: Using the new Angular v4 Option - Could not resolve module opaque_token

[jwuliger]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Windows 10

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

@angular/cli: local (v1.0.0-beta.31, branch: master)
node: 7.5.0
os: win32 x64
@angular/common: 4.0.0-beta.7
@angular/compiler: 4.0.0-beta.7
@angular/core: 4.0.0-beta.7
@angular/forms: 4.0.0-beta.7
@angular/http: 4.0.0-beta.7
@angular/platform-browser: 4.0.0-beta.7
@angular/platform-browser-dynamic: 4.0.0-beta.7
@angular/router: 4.0.0-beta.7
@angular/cli: 1.0.0-beta.31
@angular/compiler-cli: 4.0.0-beta.7

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

The error happens when you try to run a freshly created ng4 project

Step 1:
ng new my-project -ng4 --skip-install true --skip-git true --skip-tests true --skip-commit true --style scss --prefix ri --routing

Step 2
cd my-project > ng serve/build.

You will see this error:
ERROR in Could not resolve module @angular/core/src/di/opaque_token

The log given by the failure.

Normally this include a stack trace and some more information.

No logs, but I think this may have to do with AOT. Not sure.

Mention any other details that might be useful.

When Beta.31 first was released, I was able to follow the exact same steps as above and everything worked.

Just a snap of my console:

---

Thanks! We'll be in touch soon.

[beeman]

@jwuliger I can confirm this issue, it happens to my when I create a new app using your command, and also in my app I created yesterday. I'm quite sure that app worked fine yesterday and I didn't touch it since (I did mess around with @angular/cli on my machine though).

[beeman]

@jwuliger in my case I don't get the error when I run ng from the node_modules directory, like:
./node_modules/.bin/ng serve

Can you try to see if that gets around it?

[jwuliger]

@beeman Thanks for a quick response! I use npm link with the cli master so I always have the latest changes you guys make. I have not ventured into trying to modify any of the code though!

OK ~ I tried your workaround but I am getting the same error. Maybe I should re-install everything?

Thanks so much for your help!

[beeman]

Ok, that you work with the cli master explains why it fails at both our machines, I tend to run that too.

So when you npm link you essentially work with master either way you start it. What you can probably try is run npm install --save-dev @angular/cli@latest in your project. That should force getting the package from npmjs, my suggested fix should work then.

[jwuliger]

OK that makes perfect sense. It did not work for me off the cuff, but I need to try a couple things. Will report back! Thanks!

[jwuliger]

OK! You are the man!

So what I did was npm link @angular/cli then deleted my existing node_modules folder and did a fresh install. From there, I used ./node_modules/.bin/ng serve just like your suggestion and it works.

I am still new to package linking be it npm or yarn. Since I did not npm link @angular/cli after my most recent npm install, does that mean I am using the locally installed version or the master version I have on my PC?

Thanks so much!

[beeman]

Great that it works. I think it makes sense to leave the issue open as this should not happen when running it off master.

Since I did not npm link @angular/cli after my most recent npm install, does that mean I am using the locally installed version or the master version I have on my PC?

You should now run it using the locally installed version, so the released version .31 from npmjs.

The error is because the module @angular/core/src/di/opaque_token does not seem to exist anymore in Angular 4, whereas it does exist in Angular 2.

And because Angular CLI still installs dependencies from Angular 2 it has now mixed up the two versions.

Another way to get it running (this is quite ugly) is to go to your git clone of Angular CLI and install the Angular 4 dependencies and an upgraded TypeScript there:

$ npm install @angular/core@next @angular/compiler@next @angular/compiler-cli@next @angular/tsc-wrapped@next [email protected]

I don't recommend this though. The way to go is probably not linking @angular/cli but use the one from npmjs.

[jwuliger]

@beeman Thanks so much for your help and explanation. I need to get your number so I can put you on speed dial! haha. Now I get to play with the new NG4 goodness. I also think it is a good idea to leave this open for future reference. Up to you. Thanks again!!

[beeman]

I need to get your number so I can put you on speed dial! haha.

😂

Glad to hear that it's working and that you can play around with NG4.

[Meligy]

There are several packages that were considered not needed for the CLI, and still seem to fail when using the global install because it doesn't have them (while when you use the local version, the project has them).

We saw this in RxJS https://github.com/angular/angular-cli/issues/4484 and it has to be brought back in https://github.com/angular/angular-cli/pull/4465, and it's also kinda seen in https://github.com/angular/angular-cli/issues/4575.

Now, if you look closely at https://github.com/angular/angular-cli/issues/4575, it's missing angular 2.x versions, not 4.x versions. that might be related to the problem.

Probably a good solution for this stuff will be to that the CLI ensures the command is run using local package.

[mattma]

@beeman Tried your method and it did not work for me.

Even it works. I do not think this works around is a CI friendly. In CI build step, we have to tell the build step to include some local package over the default "node_modules".

I highly suggested to re-open this Issue. And find the core problem and fix it on CLI permanently.

[beeman]

@mattma the issue is still open and I expect it to be fixed in the next release

[hansl]

@jwuliger @beeman

If you are linking your local CLI master, you need to have the same Angular version both in your CLI repo and in the project. If you have Angular 2.4.x in your CLI master but not in your project this will fails, because the CLI will resolve one version, and the compiler another, and it will just mess up during build.

The way to fix this is to npm install angular next in your repo. We depend on angular when using the repo because the webpack plugin needs it.

This does NOT happen when using the npm package. Closing this as working as intended.

[jwuliger]

@hansl Thanks for the explanation Hansl. I did not know that about the CLI and I am glad you explained it. Thanks.

[mattma]

@beeman @hansl

I have confirmed that it works great after sync up Angular version and Angular-cli version, I can run 4.0.0-beta.7 with angular/cli@latest build.

Here is tricky part. I use yarn to install packages. If I do npm install, everything works as expected.

But I tried with yarn installation, i got error.

I did not change any source code. No modify package.json. I am pretty sure that yarn and npm resolve different set of Node packages. But I do not know which one was the different one.

Anyone experience this issue? Is there a way to bypass in yarn to behave like npm or figure out which one package cause the failure?

[Meligy]

Try deleting the yarn.lock file before running the installation.

[mattma]

@Meligy I tried rm -rf yarn.lock and yarn cache clean, then run yarn, ng serve. It still has the same error above. I believe the Plain new CLI project with 4.0.0.beta-7 update experience the same error.

One thing to know, in my setup, I has the typescript dependencies of ~2.0.3 before, but that does not work. After I update the version to ^2.1.5, it works but with the AppModule is not an NgModule. Is it a ts dependencies issue?

[Meligy]

For the record, I just saw this in beta 32, also yarn, no linked packages.

I thought using the issue template might be a good idea here.

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Mac OSX latest

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

@angular/cli: 1.0.0-beta.32.3
node: 6.9.1
os: darwin x64
@angular/common: 4.0.0-beta.7
@angular/compiler: 4.0.0-beta.7
@angular/core: 4.0.0-beta.7
@angular/forms: 4.0.0-beta.7
@angular/http: 4.0.0-beta.7
@angular/platform-browser: 4.0.0-beta.7
@angular/platform-browser-dynamic: 4.0.0-beta.7
@angular/router: 4.0.0-beta.7
@angular/cli: 1.0.0-beta.32.3
@angular/compiler-cli: 4.0.0-beta.7

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

I'll list what I did literally:

yarn global remove @angular/cli
yarn global add @angular/cli
ng set --global packageManager=yarn     
ng new cli32 --ng4 --style=scss --routing
cd cli32
npm start -- -open

The log given by the failure.

Normally this include a stack trace and some more information.

In the console

ERROR in Could not resolve module @angular/core/src/di/opaque_token

Mention any other details that might be useful.

• This time with Yarn not with NPM link
• Like the other report, making changes to any file re-triggers serve without error

---

Thanks! We'll be in touch soon.

[Meligy]

It works fine with NPM only though.

This works:

yarn global remove @angular/cli
yarn global add @angular/cli

ng set --global packageManager=npm

ng new cli32npm --ng4
cd cli32npm
npm start

No errors when project packages are installed using NPM.

[Meligy]

@beeman's suggestion to use next in versions did work for me, so, I created a pull request with this value.

[maxime1992]

This issue is closed but I still have the problem when using ng v4 with yarn.

Will this be fixed in next cli version ? (current 1.0.0-beta.32.3).

@Meligy your PR was just closed (not merged) right ?

[victornoel]

For those interested in a cleaner workaround to this problem with yarn:

Problem

The problems comes from yarn resolution of the dependencies of dependencies: angular-cli depends on things with versions such as ">=2.3.1 <5.0.0" and thus resolves them in the usual way, by not using beta versions.

Solution

The solution should come from yarn IMHO. I'm not sure how though, I will open an issue there (done: yarnpkg/yarn#2763).

Workaround

Simply go change the dependency resolution in yarn.lock, for example, change:

"@angular/[email protected]":
  version "4.0.0-beta.8"
  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-4.0.0-beta.8.tgz#aae7ff5b52205f790cd2993d5cf368a63981ca3f"
  dependencies:
    "@angular/tsc-wrapped" "4.0.0-beta.8"
    minimist "^1.2.0"
    reflect-metadata "^0.1.2"

"@angular/compiler-cli@>=2.3.1 <5.0.0":
  version "2.4.8"
  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-.4.8.tgz#6dad3b467243166bf2515d21993d2d1a4700a161"
  dependencies:
    "@angular/tsc-wrapped" "0.5.2"
    minimist "^1.2.0"
    reflect-metadata "^0.1.2"

to:

"@angular/[email protected]", "@angular/compiler-cli@>=2.3.1 <5.0.0":
  version "4.0.0-beta.8"
  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-4.0.0-beta.8.tgz#aae7ff5b52205f790cd2993d5cf368a63981ca3f"
  dependencies:
    "@angular/tsc-wrapped" "4.0.0-beta.8"
    minimist "^1.2.0"
    reflect-metadata "^0.1.2"

I.e., tells yarn to resolve >=2.3.1 <5.0.0 using the beta version of angular :)

[kylecordes]

@victornoel Not tried this yet, but I believe it should also be possible to coax it to do the right thing with "resolutions" in package.json?

[victornoel]

@kylecordes ah yes, you are right, it should, but it doesn't work unfortunately… I'm not sure why! They are just ignored!

I added the following at the end of my package.json for the record, maybe I didn't do it properly…

"resolutions": {
    "@angular/compiler-cli": "4.0.0-beta.8",
    "@angular/compiler": "4.0.0-beta.8",
    "@angular/core": "4.0.0-beta.8",
    "@angular/tsc-wrapped": "4.0.0-beta.8"
  }

[markgoho]

This is still happening with rc1 and yarn.

[victornoel]

@markgoho it is normal, yarn is the one at fault here, see yarnpkg/yarn#2763 and complains to them :)

[mattma]

With yarn 0.21.3 and ng 1.0.0-rc.1 setup, yarn installation works without any hacks! @kylecordes @victornoel I believe that Error has been fixed on yarn v0.20.3. Simply update to the latest of both packages work would do the tricks without any hack.

[victornoel]

@mattma I noticed the same yes :)
I think yarn wasn't fixed but simply that the dependency tree of cli 1.0.0-rc1 isn't as problematic to yarn as it was before. Good thing in any case!

[mattma]

@victornoel this issue should be very safe to close.

[kylecordes]

Yes, it seems to work well now for me also.

[mattma]

Great! good to know

[ivanntis]

I delete the files of type yarm.lock in the project and I work without problems.

[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._}