Creating Angular project without web-pack and Angular CLI

Question

I am Angular beginner. I want to create angular project without CLI. I have referred this link - https://blog.angularindepth.com/setting-up-angular-from-scratch-1f518c65d8ab to create the project but the issue is nothing from index.html is loaded in the browser. I am not sure whether is the configuration in given link is specific for Angular 6, as I am using Angular 8. It would be great help if I receive some solution. Here are my files that I created :

****index.html**

<html>
  <head>
      <meta charset="utf-8">
    <title>Hello, Angular</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <app-main>Loading...</app-main>  
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../systemjs.config.js"></script>
    <script>
      System.import('../dist/main.js').catch(function (err) {
          console.error(err);
      });
    </script>  
    <h1>Hi Abc</h1>
  </body>
</html>

systemjs.config.js

System.config({
  paths: {
    'npm:': '/node_modules/'
  },
  map: {
    app: 'dist/app',
    // app: { main: 'main.js', defaultExtension: 'js' },
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    'core-js': 'npm:core-js',
    'zone.js': 'npm:zone.js',
    // 'rxjs': 'npm:rxjs',
    'rxjs': 'npm:rxjs-compat',
    'tslib': 'npm:tslib/tslib.js'
  },
  packages: {
    'dist/app': {},
    'rxjs': {'main': 'index.js','defaultExtension': 'js'},
    'rxjs/operators': {'main': 'index.js','defaultExtension': 'js'},
    'rxjs/internal-compatibility': {'main': 'index.js','defaultExtension': 'js'},
    'rxjs/testing': {'main': 'index.js','defaultExtension': 'js'},
    'rxjs/ajax': {'main': 'index.js','defaultExtension': 'js'},
    'rxjs/webSocket': {'main': 'index.js','defaultExtension': 'js'},
    'rxjs-compat': {'main': 'index.js','defaultExtension': 'js'},
    'core-js': {},
    'zone.js': {}
  }
});

main.ts

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import { platformBrowserDynamic } 
                     from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { AppComponent} from './app.component';
import {NgModule } from '@angular/core';
import { BrowserModule} from '@angular/platform-browser';

@NgModule({
    imports : [BrowserModule],
    declarations : [AppComponent],
    bootstrap : [AppComponent]
})

export class AppModule {

}

I referred various links and still could not find where from index.html will be loaded if I am using Angular 8 and referring above link ?

If you're an Angular beginner, why would you wish to create a project without the CLI ? I've been working with Angular for 4+ years and not once have I needed to create a project without it. — , Sep 26 '19 at 14:18
I might get the "i want to look under the hood" type of thinking, but it's for advanced programmers, not beginners ... Stick to what angular advises and learn to do it their way (this will be like that everytime so you might as well get used to it !) — , Sep 26 '19 at 14:19
Yes I understand, I have created projects with CLI but wanted to try this, so if you can please suggest then it would be great help — Adya, Sep 26 '19 at 14:26
No, I can't, as stated in my previous answer. Good luck with that then, hope you succeed ! — , Sep 26 '19 at 14:27

score 0 · Answer 1 · answered Sep 26 '19 at 14:19

0

The simple answer is: Don't do it. The Angular CLI offers you to generate the basic structure, implemented in the way of the Angular best practices. It even generates the basic Unit Tests for you.

=> Just use the CLI to generate your projects :)

answered Sep 26 '19 at 14:19

dave0688

5,372
7
33
64

2

While I 100% agree, this isn't an answer and should then be a comment. – Sep 26 '19 at 14:20
I get your point. However I still think we should prevent programmers (especially people just diving into Angular) from doing that, so I think it deserves attention :) – dave0688 Sep 26 '19 at 14:21
Again, 100% agree, but SOF has rules that one should respect, and an answer that doesn't provide an actual answer to a question should then be a comment (in fact, I don't really care about your answer, I'm just spreading the word for other new users) – Sep 26 '19 at 14:23
@dave0688 maybe you can just up vote the comments posted by Maryannah. Nevertheless i agree with you, we could prevent some head aches to them by warning them about this. – lealceldeiro Sep 26 '19 at 14:25

score 0 · Accepted Answer · answered Sep 28 '19 at 16:32

These are the changes that I did and it worked :

System.import('../dist/main.js');

to

System.import('app');

Changed Systemjs.config.js :

System.config({
  paths: {
    'npm:': 'node_modules/'
  },

  map: {
    'app': 'dist/app',
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    'core-js': 'npm:core-js',
    'zone.js': 'npm:zone.js',
    'rxjs': 'npm:rxjs',
    'tslib': 'npm:tslib/tslib.js'
  },
  packages: {

    'rxjs': {
      'main': 'index.js', 'defaultExtension': 'js'
    },
    'app': {
      'main': './main.js'
    },
    'rxjs/operators': { 'main': 'index.js', 'defaultExtension': 'js' },
    'rxjs/internal-compatibility': { 'main': 'index.js', 'defaultExtension': 'js' },
    'rxjs/testing': { 'main': 'index.js', 'defaultExtension': 'js' },
    'rxjs/ajax': { 'main': 'index.js', 'defaultExtension': 'js' },
    'rxjs/webSocket': { 'main': 'index.js', 'defaultExtension': 'js' },
    'rxjs-compat': { 'main': 'index.js', 'defaultExtension': 'js' },
    'core-js': {},
    'zone.js': {}
  }
})

Used "systemjs": "^0.20.19", "zone.js": "^0.10.2" in package.json in place of latest System.js dependencies. That's how it worked fine :)

Creating Angular project without web-pack and Angular CLI

2 Answers2