{"action":"created","issue":{"url":"https://api.github.com/repos/ckeditor/ckeditor5-angular/issues/26","repository_url":"https://api.github.com/repos/ckeditor/ckeditor5-angular","labels_url":"https://api.github.com/repos/ckeditor/ckeditor5-angular/issues/26/labels{/name}","comments_url":"https://api.github.com/repos/ckeditor/ckeditor5-angular/issues/26/comments","events_url":"https://api.github.com/repos/ckeditor/ckeditor5-angular/issues/26/events","html_url":"https://github.com/ckeditor/ckeditor5-angular/issues/26","id":352855244,"node_id":"MDU6SXNzdWUzNTI4NTUyNDQ=","number":26,"title":"Build editor from source","user":{"login":"ma2ciek","id":2768047,"node_id":"MDQ6VXNlcjI3NjgwNDc=","avatar_url":"https://avatars2.githubusercontent.com/u/2768047?v=4","gravatar_id":"","url":"https://api.github.com/users/ma2ciek","html_url":"https://github.com/ma2ciek","followers_url":"https://api.github.com/users/ma2ciek/followers","following_url":"https://api.github.com/users/ma2ciek/following{/other_user}","gists_url":"https://api.github.com/users/ma2ciek/gists{/gist_id}","starred_url":"https://api.github.com/users/ma2ciek/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ma2ciek/subscriptions","organizations_url":"https://api.github.com/users/ma2ciek/orgs","repos_url":"https://api.github.com/users/ma2ciek/repos","events_url":"https://api.github.com/users/ma2ciek/events{/privacy}","received_events_url":"https://api.github.com/users/ma2ciek/received_events","type":"User","site_admin":false},"labels":[{"id":932704075,"node_id":"MDU6TGFiZWw5MzI3MDQwNzU=","url":"https://api.github.com/repos/ckeditor/ckeditor5-angular/labels/type:docs","name":"type:docs","color":"84b6eb","default":false},{"id":932704112,"node_id":"MDU6TGFiZWw5MzI3MDQxMTI=","url":"https://api.github.com/repos/ckeditor/ckeditor5-angular/labels/type:feature","name":"type:feature","color":"84b6eb","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-08-22T08:38:43Z","updated_at":"2018-09-19T13:35:12Z","closed_at":null,"author_association":"MEMBER","body":"Since the `ng eject` task for version 6 still isn't available, it's a more complicated task. Fortunately, the new CLI comes with [builders](https://medium.com/dailyjs/angular-cli-6-under-the-hood-builders-demystified-f0690ebcf01), so we can use some predefined builder, which can have different build tasks and i.e. it can use different webpack config. Here comes the [angular-builders](https://github.com/meltedspark/angular-builders) package, which can append, replace or prepend specific part of webpack config to the angular's default one - see [art](https://codeburst.io/customizing-angular-cli-6-build-an-alternative-to-ng-eject-a48304cd3b21) without ejecting. So everything should still work under `ng serve` and `ng build` 🎉\r\n\r\nI gave it a try and the results are pretty good:\r\n\r\nFirst, install additional dev dependencies (webpack loaders, CKEditor5 theme, CKEditor5 helpers and webpack builders):\r\n\r\n```\r\nnpm i -D \\\r\n\tcss-loader \\\r\n\thtml-loader\r\n\traw-loader \\ \r\n\tpostcss-loader \\\r\n\tstyle-loader \\\r\n\tawesome-typescript-loader \\\r\n\tangular2-template-loader \\\r\n\t@ckeditor/ckeditor5-dev-utils \\\r\n\t@ckeditor/ckeditor5-theme-lark \\\r\n\t@angular-builders/custom-webpack \\\r\n\t@angular-builders/dev-server\r\n```\r\n\r\nAnd dependencies (CKEditor5 core features):\r\n\r\n```\r\nnpm i -S \\\r\n\t@ckeditor/ckeditor5-editor-classic \\\r\n\t@ckeditor/ckeditor5-essentials \\\r\n\t@ckeditor/ckeditor5-basic-styles \\\r\n\t@ckeditor/ckeditor5-heading \\\r\n\t@ckeditor/ckeditor5-paragraph\r\n```\r\n\r\nSecondly, update your `angular.json` (and remember to fill with your project name): \r\n\r\n```json\r\n\"architect\": {\r\n\t\"build\": {\r\n\t\t\"builder\": \"@angular-builders/custom-webpack:browser\",\r\n\t\t\t\"options\": {\r\n\t\t\t\t\"customWebpackConfig\": {\r\n\t\t\t\t\t\"path\": \"./extra-webpack-config.js\",\r\n\t\t\t\t\t\"mergeStrategies\": {\r\n\t\t\t\t\t\t\"module.rules\": \"replace\"\r\n\t\t\t\t\t}\r\n            \t},\r\n\t\t\t\t...\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\t\"serve\": {\r\n\t\t\"builder\": \"@angular-builders/dev-server:generic\",\r\n\t\t\"options\": {\r\n\t\t\t\"browserTarget\": \"your-project-name:build\"\r\n\t\t},\r\n\t\t\"configurations\": {\r\n\t\t\t\"production\": {\r\n\t\t\t\t\"browserTarget\": \"your-project-name:build:production\"\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\t...\r\n}\r\n```\r\n\r\nAnd add simple webpack config under the `./extra-webpack-config.js` path:\r\n\r\n```js\r\nconst { styles } = require( '@ckeditor/ckeditor5-dev-utils' );\r\n\r\nmodule.exports = {\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: /\\.svg$/,\r\n        use: [ 'raw-loader' ]\r\n      },\r\n      {\r\n        test: /ckeditor5-[^/\\\\]+[/\\\\]theme[/\\\\].+\\.css/,\r\n        use: [\r\n          {\r\n            loader: 'style-loader',\r\n            options: {\r\n              singleton: true\r\n            }\r\n          },\r\n          {\r\n            loader: 'postcss-loader',\r\n            options: styles.getPostCssConfig( {\r\n              themeImporter: {\r\n                themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )\r\n              },\r\n              minify: true\r\n            } )\r\n          }\r\n        ]\r\n      },\r\n      {\r\n        test: /\\.ts$/,\r\n        exclude: /\\.(spec|e2e)\\.ts$/,\r\n        use: [\r\n          'awesome-typescript-loader',\r\n          'angular2-template-loader'\r\n        ],\r\n      },\r\n      {\r\n        test: /\\.css/,\r\n        exclude: /ckeditor5-[^/\\\\]+[/\\\\]theme[/\\\\].+\\.css/,\r\n        use: 'raw-loader'\r\n      },\r\n      {\r\n        test: /\\.html/,\r\n        use: [\r\n          'html-loader'\r\n        ]\r\n      }\r\n    ]\r\n  }\r\n}\r\n```\r\n\r\nThen you can create your component that can use CKEditor5 plugins (`app.component.ts`):\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\n\r\nimport ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';\r\nimport Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';\r\nimport Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';\r\nimport Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';\r\nimport Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';\r\nimport Heading from '@ckeditor/ckeditor5-heading/src/heading';\r\n\r\n@Component( {\r\n  selector: 'app-root',\r\n  templateUrl: './app.component.html',\r\n  styleUrls: [ './app.component.css' ]\r\n} )\r\nexport class AppComponent {\r\n  public Editor = ClassicEditor;\r\n\r\n  public config = {\r\n    plugins: [ Essentials, Paragraph, Bold, Italic, Heading ],\r\n    toolbar: [ 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo', ]\r\n  };\r\n}\r\n```\r\n\r\nAnd write a simple template (`app.component.html`):\r\n\r\n```\r\n<ckeditor [editor]=\"Editor\" [config]=\"config\"></ckeditor>\r\n```\r\n\r\nAfter that step, you'll be able to run `ng serve` / `ng build`.\r\n\r\nThere're a lot of steps, but for now, I don't think it could be done in some easier way. And I didn't check how tests work, but there is the `jest builder` too - https://github.com/meltedspark/angular-builders/tree/master/packages/jest."},"comment":{"url":"https://api.github.com/repos/ckeditor/ckeditor5-angular/issues/comments/422805741","html_url":"https://github.com/ckeditor/ckeditor5-angular/issues/26#issuecomment-422805741","issue_url":"https://api.github.com/repos/ckeditor/ckeditor5-angular/issues/26","id":422805741,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMjgwNTc0MQ==","user":{"login":"ma2ciek","id":2768047,"node_id":"MDQ6VXNlcjI3NjgwNDc=","avatar_url":"https://avatars2.githubusercontent.com/u/2768047?v=4","gravatar_id":"","url":"https://api.github.com/users/ma2ciek","html_url":"https://github.com/ma2ciek","followers_url":"https://api.github.com/users/ma2ciek/followers","following_url":"https://api.github.com/users/ma2ciek/following{/other_user}","gists_url":"https://api.github.com/users/ma2ciek/gists{/gist_id}","starred_url":"https://api.github.com/users/ma2ciek/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ma2ciek/subscriptions","organizations_url":"https://api.github.com/users/ma2ciek/orgs","repos_url":"https://api.github.com/users/ma2ciek/repos","events_url":"https://api.github.com/users/ma2ciek/events{/privacy}","received_events_url":"https://api.github.com/users/ma2ciek/received_events","type":"User","site_admin":false},"created_at":"2018-09-19T13:35:12Z","updated_at":"2018-09-19T13:35:12Z","author_association":"MEMBER","body":"Good to now that there's an issue there. Glad to help you :)"}}
{"actor":{"display_login":"ma2ciek"}}