Angular-cli 8 with create-single-spa fails with error #208

filoxo · 2020-06-02T15:32:50Z

Demonstration

switch to node v10 (I used nvm)
globally install @angular/cli@8.3.23 (npm i -g @angular/cli@8.3.23)
Run create-single-spa by running npx create-single-spa
Respond to prompts

Expected Behavior

The angular-cli should be able to find and use the single-spa-angular schematic to successfully create a new Angular single-spa application.

Actual Behavior

Observe that after packages are being installed an error is displayed.

An unhandled exception occurred: Collection "single-spa-angular" cannot be resolved.

Full logs

~/dev 
❯ ng v

    _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.3.23
Node: 10.16.3
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.23
@angular-devkit/core         8.3.23
@angular-devkit/schematics   8.3.23
@schematics/angular          8.3.23
@schematics/update           0.803.23
rxjs                         6.4.0
    

~/dev 
❯ npx create-single-spa
(node:65868) ExperimentalWarning: The fs.promises API is experimental
? Directory for new project ng8test
? Select type to generate single-spa application / parcel
? Which framework do you want to use? angular
? What name would you like to use for the new workspace and initial project? navbar
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE ng8test/README.md (1024 bytes)
CREATE ng8test/.editorconfig (246 bytes)
CREATE ng8test/.gitignore (631 bytes)
CREATE ng8test/angular.json (3593 bytes)
CREATE ng8test/package.json (1292 bytes)
CREATE ng8test/tsconfig.json (543 bytes)
CREATE ng8test/tslint.json (1953 bytes)
CREATE ng8test/browserslist (429 bytes)
CREATE ng8test/karma.conf.js (1018 bytes)
CREATE ng8test/tsconfig.app.json (270 bytes)
CREATE ng8test/tsconfig.spec.json (270 bytes)
CREATE ng8test/src/favicon.ico (948 bytes)
CREATE ng8test/src/index.html (292 bytes)
CREATE ng8test/src/main.ts (372 bytes)
CREATE ng8test/src/polyfills.ts (2838 bytes)
CREATE ng8test/src/styles.css (80 bytes)
CREATE ng8test/src/test.ts (642 bytes)
CREATE ng8test/src/assets/.gitkeep (0 bytes)
CREATE ng8test/src/environments/environment.prod.ts (51 bytes)
CREATE ng8test/src/environments/environment.ts (662 bytes)
CREATE ng8test/src/app/app.module.ts (314 bytes)
CREATE ng8test/src/app/app.component.css (0 bytes)
CREATE ng8test/src/app/app.component.html (25498 bytes)
CREATE ng8test/src/app/app.component.spec.ts (981 bytes)
CREATE ng8test/src/app/app.component.ts (210 bytes)
CREATE ng8test/e2e/protractor.conf.js (808 bytes)
CREATE ng8test/e2e/tsconfig.json (214 bytes)
CREATE ng8test/e2e/src/app.e2e-spec.ts (639 bytes)
CREATE ng8test/e2e/src/app.po.ts (262 bytes)
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated

> fsevents@1.2.13 install /Users/carlosfiloteo/dev/ng8test/node_modules/@angular/compiler-cli/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> fsevents@1.2.13 install /Users/carlosfiloteo/dev/ng8test/node_modules/karma/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> fsevents@1.2.13 install /Users/carlosfiloteo/dev/ng8test/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> fsevents@1.2.13 install /Users/carlosfiloteo/dev/ng8test/node_modules/webpack-dev-server/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> core-js@3.6.4 postinstall /Users/carlosfiloteo/dev/ng8test/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> core-js@2.6.11 postinstall /Users/carlosfiloteo/dev/ng8test/node_modules/karma/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> @angular/cli@8.3.26 postinstall /Users/carlosfiloteo/dev/ng8test/node_modules/@angular/cli
> node ./bin/postinstall/script.js

npm WARN karma-jasmine-html-reporter@1.5.4 requires a peer of jasmine-core@>=3.5 but none is installed. You must install peer dependencies yourself.

added 1234 packages from 1063 contributors and audited 1237 packages in 62.91s
found 3 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
    Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
An unhandled exception occurred: Collection "single-spa-angular" cannot be resolved.
See "/private/var/folders/13/kjchj7md1j5b4k030y3mgjj80000gn/T/ng-HUs1XS/angular-errors.log" for further details.
For further routing setup, see https://single-spa.js.org/docs/ecosystem-angular#configure-routes

~/dev 
❯ cat /private/var/folders/13/kjchj7md1j5b4k030y3mgjj80000gn/T/ng-HUs1XS/angular-errors.log                                                                                 <<<
[error] Error: Collection "single-spa-angular" cannot be resolved.
    at NodeModulesEngineHost._resolveCollectionPath (/Users/carlosfiloteo/dev/ng8test/node_modules/@angular-devkit/schematics/tools/node-module-engine-host.js:91:15)
    at NodeModulesEngineHost.createCollectionDescription (/Users/carlosfiloteo/dev/ng8test/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js:115:27)
    at SchematicEngine._createCollectionDescription (/Users/carlosfiloteo/dev/ng8test/node_modules/@angular-devkit/schematics/src/engine/engine.js:147:40)
    at SchematicEngine.createCollection (/Users/carlosfiloteo/dev/ng8test/node_modules/@angular-devkit/schematics/src/engine/engine.js:140:43)
    at AddCommand.getCollection (/Users/carlosfiloteo/dev/ng8test/node_modules/@angular/cli/models/schematic-command.js:128:35)
    at AddCommand.runSchematic (/Users/carlosfiloteo/dev/ng8test/node_modules/@angular/cli/models/schematic-command.js:291:50)
    at AddCommand.executeSchematic (/Users/carlosfiloteo/dev/ng8test/node_modules/@angular/cli/commands/add-impl.js:148:31)
    at AddCommand.run (/Users/carlosfiloteo/dev/ng8test/node_modules/@angular/cli/commands/add-impl.js:114:21)%

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

filoxo · 2020-06-02T16:07:12Z

single-spa-angular@4 does not work with Angular 2-8. Only Angular 9. create-single-spa does not specify a version (because as a generic tool, it assumes the latest tooling versions).

I was make some progress after this failure by:

reverting the changes that happened before the process failed (git reset --hard)
running ng add single-spa-angular@3.5.1
add missing single-spa dependency npm install single-spa -S
running serve script npm run serve:single-spa:[app name goes here]

Then I get the following error:

~/dev/ng8test on  master ● ●
❯ npm run serve:single-spa:navbar

> navbar@0.0.0 serve:single-spa:navbar /Users/carlosfiloteo/dev/ng8test
> ng s --project navbar --disable-host-check --port 4200 --deploy-url http://localhost:4200/ --live-reload false

WARNING: Running a server with --disable-host-check is a security risk. See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a for more information.
WARNING: --deploy-url and/or --base-href contain unsupported values for ng serve. Default serve path of '/' used. Use --serve-path to override.
10% building 1/1 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/carlosfiloteo/dev/ng8test/src

chunk {main} main.js, main.js.map (main) 13.9 kB [entry] [rendered]
Date: 2020-06-02T16:04:30.864Z - Hash: 29489b1cefc0d6b5a125 - Time: 2342ms

ERROR in node_modules/single-spa-angular/src/extra-providers.d.ts:2:10 - error TS2305: Module '"../../@angular/common/common"' has no exported member 'ɵBrowserPlatformLocation'.

2 import { ɵBrowserPlatformLocation, LocationChangeEvent } from '@angular/common';
           ~~~~~~~~~~~~~~~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Failed to compile.

filoxo · 2020-06-02T16:13:19Z

Hmm the above appears to be because at some point, something is upgrading single-spa-angular to the latest version rather than keeping the pinned version that is specified with the ng add command.

joeldenning · 2020-06-03T17:04:29Z

Hmm the above appears to be because at some point, something is upgrading single-spa-angular to the latest version rather than keeping the pinned version that is specified with the ng add command.

This is due to Angular schematics. When you run ng add single-spa-angular@3.5.1, it kicks off a process known as "schematics" that are defined within the single-spa-angular project. The schematics can modify the package.json, angular.json, and create/edit files.

For single-spa-angular@3, the schematics add single-spa-angular as a dependency to the package.json. The code for that is shown below:

single-spa-angular/src/schematics/ng-add/index.ts

Line 32 in fd72066

export function addDependencies(options: NgAddOptions) {

single-spa-angular/src/schematics/ng-add/index.ts

Line 34 in fd72066

addPackageToPackageJson(host, 'single-spa-angular', versions.singleSpaAngular);

single-spa-angular/src/schematics/library-versions.ts

Line 1 in fd72066

export const singleSpaAngular = '^3.0.0';

^ This code appears to be adding single-spa-angular@^3. However, it seems that you're seeing it add single-spa-angular@4?? If so, that is a bug that we should fix.

filoxo · 2020-06-29T14:57:34Z

I wonder if this was resolved in #231. I'll do some testing in the near future.

joeldenning · 2020-06-29T16:55:09Z

Yeah that PR looks promising for fixing this.

filoxo · 2020-10-23T15:08:28Z

Closing this since 1) I have not personally seen this come up again since, and 2) we don't seem to have received any other reports of it happening.

filoxo changed the title ~~Angular-cli~~ Angular-cli 8 with create-single-spa fails with error Jun 2, 2020

filoxo mentioned this issue Jun 5, 2020

Schematics generate a buggy template for the 'bootstrapFunction' #209

Closed

phonethantko mentioned this issue Jul 1, 2020

Issue in single-spa-angular 3.5.3 with Angular 9 apps #233

Closed

filoxo closed this as completed Oct 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular-cli 8 with create-single-spa fails with error #208

Angular-cli 8 with create-single-spa fails with error #208

filoxo commented Jun 2, 2020

filoxo commented Jun 2, 2020

filoxo commented Jun 2, 2020

joeldenning commented Jun 3, 2020 •

edited

filoxo commented Jun 29, 2020

joeldenning commented Jun 29, 2020

filoxo commented Oct 23, 2020

Angular-cli 8 with create-single-spa fails with error #208

Angular-cli 8 with create-single-spa fails with error #208

Comments

filoxo commented Jun 2, 2020

Demonstration

Expected Behavior

Actual Behavior

filoxo commented Jun 2, 2020

filoxo commented Jun 2, 2020

joeldenning commented Jun 3, 2020 • edited

filoxo commented Jun 29, 2020

joeldenning commented Jun 29, 2020

filoxo commented Oct 23, 2020

joeldenning commented Jun 3, 2020 •

edited