Using the new Angular v4 Option - Could not resolve module opaque_token #4611

jwuliger · 2017-02-11T05:05:38Z

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.

The text was updated successfully, but these errors were encountered:

beeman · 2017-02-11T05:17:05Z

@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 · 2017-02-11T05:38:04Z

@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 · 2017-02-11T05:52:58Z

@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 · 2017-02-11T05:55:58Z

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 · 2017-02-11T06:12:45Z

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 · 2017-02-11T06:23:31Z

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 · 2017-02-11T06:39:41Z

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 typescript@2.1.5

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

jwuliger · 2017-02-11T06:48:50Z

@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 · 2017-02-11T07:00:34Z

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 · 2017-02-11T12:31:38Z

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 #4484 and it has to be brought back in #4465, and it's also kinda seen in #4575.

Now, if you look closely at #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 · 2017-02-11T20:36:10Z

@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 · 2017-02-11T20:37:34Z

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

hansl · 2017-02-12T19:51:35Z

@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 · 2017-02-12T20:16:21Z

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

mattma · 2017-02-14T00:41:36Z

@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 · 2017-02-14T09:44:02Z

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

mattma · 2017-02-14T18:25:43Z

@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 · 2017-02-17T12:43:30Z

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 · 2017-02-17T12:46:51Z

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.

Fixes angular#4611

Meligy · 2017-02-17T12:56:10Z

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

maxime1992 · 2017-02-23T08:14:31Z

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 · 2017-02-23T09:22:27Z

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/compiler-cli@4.0.0-beta.8":
  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/compiler-cli@4.0.0-beta.8", "@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 · 2017-02-23T13:42:44Z

@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 · 2017-02-23T13:59:20Z

@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 · 2017-02-25T04:48:43Z

This is still happening with rc1 and yarn.

victornoel · 2017-02-25T11:07:23Z

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

mattma · 2017-03-04T18:51:05Z

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 · 2017-03-04T19:12:02Z

@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 · 2017-03-04T23:30:43Z

@victornoel this issue should be very safe to close.

kylecordes · 2017-03-05T02:34:20Z

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

mattma · 2017-03-05T03:12:58Z

Great! good to know

ivanntis · 2017-05-08T15:44:02Z

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

angular-automatic-lock-bot · 2019-09-07T02:41:20Z

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

beeman mentioned this issue Feb 11, 2017

4.0.0-Beta.6 opaque_token relative to undefined angular/angular#14348

Closed

hansl closed this as completed Feb 12, 2017

Meligy added a commit to Meligy/angular-cli that referenced this issue Feb 17, 2017

fix(new): --ng4 tells yarn to use latest Angular packages

89f1e41

Fixes angular#4611

Meligy mentioned this issue Feb 17, 2017

fix(new): --ng4 tells yarn to use latest Angular packages #4781

Closed

Meligy mentioned this issue Feb 17, 2017

Ng serve fails with Yarn and the -ng4 flag #4787

Closed

victornoel mentioned this issue Feb 23, 2017

Handling dependencies of dependencies and their resolution yarnpkg/yarn#2763

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

Using the new Angular v4 Option - Could not resolve module opaque_token #4611

Using the new Angular v4 Option - Could not resolve module opaque_token #4611

Comments

jwuliger commented Feb 11, 2017

Please provide us with the following information:

OS?

Versions.

Repro steps.

The log given by the failure.

Mention any other details that might be useful.

beeman commented Feb 11, 2017

beeman commented Feb 11, 2017

jwuliger commented Feb 11, 2017

beeman commented Feb 11, 2017

jwuliger commented Feb 11, 2017 • edited Loading

jwuliger commented Feb 11, 2017

beeman commented Feb 11, 2017 • edited Loading

jwuliger commented Feb 11, 2017

beeman commented Feb 11, 2017

Meligy commented Feb 11, 2017

mattma commented Feb 11, 2017 • edited Loading

beeman commented Feb 11, 2017

hansl commented Feb 12, 2017

jwuliger commented Feb 12, 2017

mattma commented Feb 14, 2017

Meligy commented Feb 14, 2017

mattma commented Feb 14, 2017

Meligy commented Feb 17, 2017

Please provide us with the following information:

OS?

Versions.

Repro steps.

The log given by the failure.

Mention any other details that might be useful.

Meligy commented Feb 17, 2017

Meligy commented Feb 17, 2017

maxime1992 commented Feb 23, 2017 • edited Loading

victornoel commented Feb 23, 2017 • edited Loading

Problem

Solution

Workaround

kylecordes commented Feb 23, 2017

victornoel commented Feb 23, 2017

markgoho commented Feb 25, 2017

victornoel commented Feb 25, 2017

mattma commented Mar 4, 2017 • edited Loading

victornoel commented Mar 4, 2017

mattma commented Mar 4, 2017

kylecordes commented Mar 5, 2017

mattma commented Mar 5, 2017

ivanntis commented May 8, 2017

angular-automatic-lock-bot bot commented Sep 7, 2019

jwuliger commented Feb 11, 2017 •

edited

Loading

beeman commented Feb 11, 2017 •

edited

Loading

mattma commented Feb 11, 2017 •

edited

Loading

maxime1992 commented Feb 23, 2017 •

edited

Loading

victornoel commented Feb 23, 2017 •

edited

Loading

mattma commented Mar 4, 2017 •

edited

Loading