fix: various app templates & custom envs typos/links/issues

angular/app-types/angular-app-type/component.json

@@ -12,8 +12,7 @@
           "nitropack": "^2.8.0",
           "@angular-devkit/build-angular": "-",
           "@angular/cli": "-",
-          "typescript": "-",
-          "#alias": "-"
+          "typescript": "-"
         },
         "peerDependencies": {
           "@angular-devkit/build-angular": ">= 0.0.1",

angular/envs/angular-env/env.jsonc

@@ -116,6 +116,6 @@
   "patterns": {
     "compositions": ["**/*.composition.*", "**/*.preview.*"],
     "docs": ["**/*.docs.*"],
-    "tests": ["**/*.spec.*", "**/*.test.*", "**/*.cy.*"],
+    "tests": ["**/*.spec.*", "**/*.test.*", "**/*.cy.*"]
   }
 }

angular/envs/base-env/preview/mounter.ts

@@ -6,7 +6,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
  * Provide your component compositions (preview) with the context they need to run.
  * for example, a router, a theme, a data provider, etc.
  * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 @Component({
   selector: 'bit-wrapper',
@@ -23,6 +23,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
 /**
  * the entry for the app (preview runtime) that renders your component previews.
  * use the default template or create your own.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 export default createMounter(WrapperComponent);

angular/examples/my-angular-env/env.jsonc

@@ -116,6 +116,6 @@
   "patterns": {
     "compositions": ["**/*.composition.*", "**/*.preview.*"],
     "docs": ["**/*.docs.*"],
-    "tests": ["**/*.spec.*", "**/*.test.*", "**/*.cy.*"],
+    "tests": ["**/*.spec.*", "**/*.test.*", "**/*.cy.*"]
   }
 }

angular/examples/my-angular-env/my-angular-env.bit-env.ts

@@ -44,7 +44,7 @@ export class MyAngularEnv extends AngularEnv {
 
   getLinterConfig() {
     return {
-      tsconfig: require.resolve('@bitdev/angular.dev-services.linter.eslint/config/tsconfig.json'),
+      tsconfig: require.resolve('./config/tsconfig.json'),
       eslint: ESLintLib,
       configPath: require.resolve('./config/eslintrc'),
       // resolve all plugins from the angular environment.
@@ -64,7 +64,7 @@ export class MyAngularEnv extends AngularEnv {
         tsconfigPath: require.resolve('./config/tsconfig.json'),
       });
     }
-    return ngMultiCompiler;
+    return ngMultiCompiler!;
   }
 
   /**

angular/examples/my-angular-env/my-angular-env.docs.mdx

@@ -20,7 +20,7 @@ import { EnvOverview } from '@teambit/envs.docs.env-overview-template';
       {
         name: 'Jest',
         configFiles: [
-          'https://bit.cloud/bitdev/angular/envs/angular-v16/~code/jest/jest.config.ts',
+          'https://bit.cloud/bitdev/angular/envs/angular-v17/~code/jest/jest.config.ts',
         ],
       },
       {
@@ -52,7 +52,7 @@ import { EnvOverview } from '@teambit/envs.docs.env-overview-template';
       {
         name: 'Jest',
         configFiles: [
-          'https://bit.cloud/bitdev/angular/envs/angular-v16/~code/jest/jest.config.ts',
+          'https://bit.cloud/bitdev/angular/envs/angular-v17/~code/jest/jest.config.ts',
         ],
       },
     ],

angular/examples/my-angular-env/preview/mounter.ts

@@ -6,7 +6,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
  * Provide your component compositions (preview) with the context they need to run.
  * for example, a router, a theme, a data provider, etc.
  * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file.
- * @see https://bit.dev/docs/my-angular-env/components-preview#compositions-providers
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 @Component({
   selector: 'bit-wrapper',
@@ -22,6 +22,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
 /**
  * the entry for the app (preview runtime) that renders your component previews.
  * use the default template or create your own.
- * @see https://bit.dev/docs/my-angular-env/components-preview#compositions-mounter
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 export default createMounter(WrapperComponent);

angular/examples/my-angular-v13-env/my-angular-v13-env.bit-env.ts

@@ -64,7 +64,7 @@ export class MyAngularV13Env extends AngularV13Env {
         tsconfigPath: require.resolve('./config/tsconfig.json'),
       });
     }
-    return ngMultiCompiler;
+    return ngMultiCompiler!;
   }
 
   /**

angular/examples/my-angular-v13-env/preview/mounter.ts

@@ -6,7 +6,7 @@ import { Component, NgModule, ViewEncapsulation } from '@angular/core';
  * Provide your component compositions (preview) with the context they need to run.
  * for example, a router, a theme, a data provider, etc.
  * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 @Component({
   selector: 'bit-wrapper',
@@ -29,6 +29,6 @@ import { Component, NgModule, ViewEncapsulation } from '@angular/core';
 /**
  * the entry for the app (preview runtime) that renders your component previews.
  * use the default template or create your own.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 export default createMounter(WrapperModule, {wrapperSelector: '#wrapper-host'});

angular/examples/my-angular-v14-env/my-angular-v14-env.bit-env.ts

@@ -64,7 +64,7 @@ export class MyAngularV14Env extends AngularV14Env {
         tsconfigPath: require.resolve('./config/tsconfig.json'),
       });
     }
-    return ngMultiCompiler;
+    return ngMultiCompiler!;
   }
 
   /**

angular/examples/my-angular-v14-env/preview/mounter.ts

@@ -6,7 +6,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
  * Provide your component compositions (preview) with the context they need to run.
  * for example, a router, a theme, a data provider, etc.
  * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 @Component({
   selector: 'bit-wrapper',
@@ -22,6 +22,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
 /**
  * the entry for the app (preview runtime) that renders your component previews.
  * use the default template or create your own.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 export default createMounter(WrapperComponent);

angular/examples/my-angular-v15-env/my-angular-v15-env.bit-env.ts

@@ -64,7 +64,7 @@ export class MyAngularV15Env extends AngularV15Env {
         tsconfigPath: require.resolve('./config/tsconfig.json'),
       });
     }
-    return ngMultiCompiler;
+    return ngMultiCompiler!;
   }
 
   /**

angular/examples/my-angular-v15-env/preview/mounter.ts

@@ -6,7 +6,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
  * Provide your component compositions (preview) with the context they need to run.
  * for example, a router, a theme, a data provider, etc.
  * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 @Component({
   selector: 'bit-wrapper',
@@ -22,6 +22,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
 /**
  * the entry for the app (preview runtime) that renders your component previews.
  * use the default template or create your own.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 export default createMounter(WrapperComponent);

angular/examples/my-angular-v16-env/my-angular-v16-env.bit-env.ts

@@ -64,7 +64,7 @@ export class MyAngularV16Env extends AngularV16Env {
         tsconfigPath: require.resolve('./config/tsconfig.json'),
       });
     }
-    return ngMultiCompiler;
+    return ngMultiCompiler!;
   }
 
   /**

angular/examples/my-angular-v16-env/preview/mounter.ts

@@ -6,7 +6,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
  * Provide your component compositions (preview) with the context they need to run.
  * for example, a router, a theme, a data provider, etc.
  * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 @Component({
   selector: 'bit-wrapper',
@@ -22,6 +22,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
 /**
  * the entry for the app (preview runtime) that renders your component previews.
  * use the default template or create your own.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 export default createMounter(WrapperComponent);

angular/examples/my-angular-v17-env/my-angular-v17-env.bit-env.ts

@@ -64,7 +64,7 @@ export class MyAngularV17Env extends AngularV17Env {
         tsconfigPath: require.resolve('./config/tsconfig.json'),
       });
     }
-    return ngMultiCompiler;
+    return ngMultiCompiler!;
   }
 
   /**

angular/examples/my-angular-v17-env/preview/mounter.ts

@@ -6,7 +6,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
  * Provide your component compositions (preview) with the context they need to run.
  * for example, a router, a theme, a data provider, etc.
  * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 @Component({
   selector: 'bit-wrapper',
@@ -22,6 +22,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
 /**
  * the entry for the app (preview runtime) that renders your component previews.
  * use the default template or create your own.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 export default createMounter(WrapperComponent);

angular/templates/generators/ng-app/index.ts

@@ -1,12 +1,15 @@
-import { AngularComponentTemplateOptions } from '@bitdev/angular.dev-services.common';
+import { AngularComponentTemplateOptions, getWorkspace } from '@bitdev/angular.dev-services.common';
 import { confirm, group, select } from '@clack/prompts';
+import { ComponentID } from '@teambit/component';
 import { EnvContext, EnvHandler } from '@teambit/envs';
 import { ComponentContext, ComponentTemplate } from '@teambit/generator';
 import { Logger } from '@teambit/logger';
+import { PkgAspect, PkgMain } from '@teambit/pkg';
+import { Workspace } from '@teambit/workspace';
 import { isCI } from 'std-env';
 import { indexFile } from './template-files';
-import { docsFile } from './template-files/docs';
 import { ngAppFile } from './template-files/bit-app';
+import { docsFile } from './template-files/docs';
 import { appComponentFile } from './template-files/src/app/app.component';
 import { appComponentHtmlFile } from './template-files/src/app/app.component-html';
 import { appComponentStyleSheetFile } from './template-files/src/app/app.component-scss';
@@ -33,7 +36,9 @@ export class NgAppTemplate implements ComponentTemplate {
     readonly angularVersion: number,
     readonly name = 'ng-app',
     readonly description = 'create an Angular application',
-    readonly hidden = false
+    readonly hidden = false,
+    private pkg: PkgMain,
+    private workspace: Workspace | undefined
   ) {
   }
 
@@ -86,10 +91,22 @@ export class NgAppTemplate implements ComponentTemplate {
       params = await this.prompt(context);
     }
 
+    const aspectId: ComponentID = typeof context.aspectId === 'string' ? ComponentID.fromString(context.aspectId) : context.aspectId;
+    const envId = aspectId.toStringWithoutVersion();
+    let envPkgName: string;
+    if (this.workspace) {
+      const envComponent = await this.workspace!.get(aspectId);
+      envPkgName = this.pkg.getPackageName(envComponent);
+    } else if (envId === 'bitdev.angular/angular-env') { // mostly for ci / ripple
+      envPkgName = '@bitdev/angular.angular-env';
+    } else {
+      envPkgName = `@bitdev/angular.envs.angular-v${ this.angularVersion }-env`;
+    }
+
     const files = [
       docsFile(context),
       indexFile(context),
-      ngAppFile(context, params.styleSheet, params.ssr),
+      ngAppFile(context, params.styleSheet, params.ssr, envPkgName),
       tsconfigFile(this.angularVersion, params.ssr),
       indexHtmlFile(context),
       mainNgAppFile(params.standalone),
@@ -137,12 +154,16 @@ export class NgAppTemplate implements ComponentTemplate {
     return (context: EnvContext) => {
       const name = options.name || 'ng-app-template';
       const logger = context.createLogger(name);
+      const pkg = context.getAspect<PkgMain>(PkgAspect.id);
+      const workspace = getWorkspace(context);
       return new NgAppTemplate(
         logger,
         options.angularVersion,
         options.name,
         options.description,
-        options.hidden
+        options.hidden,
+        pkg,
+        workspace
       );
     };
   }

angular/templates/generators/ng-app/template-files/bit-app.ts

@@ -1,12 +1,12 @@
 import { ComponentContext, ComponentFile } from '@teambit/generator';
 
-export const ngAppFile = (context: ComponentContext, styleSheet: string, ssr: boolean): ComponentFile => {
+export const ngAppFile = (context: ComponentContext, styleSheet: string, ssr: boolean, envPkgName: string): ComponentFile => {
   const { name, namePascalCase: Name } = context;
   return {
     relativePath: `${name}.bit-app.ts`,
     content: `import { type AngularAppOptions, AngularApp } from '@bitdev/angular.app-types.angular-app-type';
 import { ${ssr ? `ApplicationOptions`: `BrowserOptions` }, DevServerOptions } from '@bitdev/angular.dev-services.common';
-import { ngEnvOptions } from '@bitdev/angular.envs.angular-v17-env';
+import { ngEnvOptions } from '${envPkgName}';
 
 const angularOptions: ${ssr ? `ApplicationOptions`: `BrowserOptions` } & DevServerOptions = {
   ${ssr ? `browser: './src/main.ts',

angular/templates/generators/ng-env/files/preview/mounter.ts

@@ -9,7 +9,7 @@ import { Component, NgModule, ViewEncapsulation } from '@angular/core';
  * Provide your component compositions (preview) with the context they need to run.
  * for example, a router, a theme, a data provider, etc.
  * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 @Component({
   selector: 'bit-wrapper',
@@ -32,7 +32,7 @@ import { Component, NgModule, ViewEncapsulation } from '@angular/core';
 /**
  * the entry for the app (preview runtime) that renders your component previews.
  * use the default template or create your own.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 export default createMounter(WrapperModule, {wrapperSelector: '#wrapper-host'});`
 // Angular v14+
@@ -44,7 +44,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
  * Provide your component compositions (preview) with the context they need to run.
  * for example, a router, a theme, a data provider, etc.
  * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 @Component({
   selector: 'bit-wrapper',
@@ -60,7 +60,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
 /**
  * the entry for the app (preview runtime) that renders your component previews.
  * use the default template or create your own.
- * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter
+ * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
  */
 export default createMounter(WrapperComponent);
 `,